<template>
    <div class="todo_list">
        <h3>这是一个todolist案例</h3>
        <TodoHead :getData="getData"></TodoHead>
        <TodoInner :todos="todos" :getChecked="getChecked" :removeItem="removeItem"></TodoInner>
        <TodoFooter :todos="todos" :clearAllDone="clearAllDone"></TodoFooter>
    </div>
</template>

<script>
import TodoHead from './TodoHead.vue';
import TodoInner from './TodoInner.vue';
import TodoFooter from './TodoFooter.vue';

export default {
    name: 'TodoList',
    components: {TodoHead, TodoInner, TodoFooter},
    data() {
        return {
            todos: [
                {id: '001', task: '吃饭', isDone: true},
                {id: '002', task: '睡觉', isDone: false},
                {id: '003', task: '打豆豆', isDone: true},
            ],
        }
    },
    methods: {
        // 从Head组件中获取输入的任务，并添加任务
        getData(data) {
            // console.log('父组件收到了数据：', data);
            this.todos.unshift(data);
        },
        // 从Item组件中获取勾选的任务的id，然后修改该任务的完成情况
        getChecked(id) {
            // console.log('爷组件从孙子组件Item中获取到了id：', id);
            this.todos.forEach((todo) => {
                todo.id === id && (todo.isDone = !todo.isDone);
            })
        },
        // 点击删除，移除该项任务
        removeItem(id) {
            // console.log('爷组件从孙子组件Item中获取到了id：', id);
            this.todos = this.todos.filter(todo => todo.id !== id)
        },
        // 清除所有已完成任务项
        clearAllDone() {
            this.todos = this.todos.filter(todo => !todo.isDone);
        }
    }
}
</script>

<style scoped>
.todo_list {
    width: 350px;
    border: 1px solid pink;
    border-radius: 12px;
    padding-bottom: 10px;
    box-sizing: border-box;
}
h3 {
    width: 100%;
    text-align: center;
}
</style>